<template>
	<view class="add-work-plan">
		<u-navbar bgColor='#4871C0' :titleStyle="{ color: '#FFF'}" title="添加工作计划" leftIconColor="#FFF"
			@rightClick="rightClick" :autoBack="true">
		</u-navbar>

		<view class="info">

			<u-cell title="日期" :isLink="true" :value="date_string_all" arrow-direction="right" @click="showdate=true">
			</u-cell>
			<u-cell title="牵头部门" :isLink="true" :value="org" style='border:0' @click="openOrg"></u-cell>
			<u-cell title="负责人" style='border:0' :value="fuzeren">
				<u-input placeholder="请输入负责人" slot="value" inputAlign="right" v-model="fuzeren" class="u-slot-value">
				</u-input>
			</u-cell>
			<u-cell title="使用场所" :value="cangsuo+userTime" :isLink="true" style='border:0' @click="openChangsuo">
				<!--        <u-input-->
				<!--            placeholder="请输入使用场所"-->
				<!--            slot="value"-->
				<!--            inputAlign="right"-->
				<!--            v-model="cangsuo"-->
				<!--            class="u-slot-value"-->
				<!--        ></u-input>-->
			</u-cell>
		</view>
		<!-- 中心计划 -->
		<view class="main-plan">
			<view class="text must">中心计划</view>
			<view class="textarea">
				<u--textarea v-model="zhongxin" placeholder="请输入内容" class='textarea' confirmType="done" :maxlength="-1"></u--textarea>
			</view>
		</view>
		<!-- 备注 -->
		<view class="main-plan">
			<view class="text">备注</view>
			<view class="textarea">
				<u--textarea v-model="remark" placeholder="请输入备注文字" class='textarea' confirmType="done" :maxlength="-1"></u--textarea>
			</view>
		</view>
		<!-- 上传附件 -->
<!-- 		<u-collapse style="background-color: #fff;border:0;margin-top: 20rpx;">
			<u-collapse-item>
				<text slot="title" class="upload-title">上传附件</text>
				<view class="upload">
					<view class="image">
						<view class="text">图片</view>
						<view class="uploadIcon">
							<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="6" multiple
								:maxCount="3" :previewFullImage="true" width="64" height="34"> +
							</u-upload>
						</view>
					</view>
					<view class="image">
						<view class="text">附件</view>
						<view class="uploadIcon">
							<u-upload v-if="!show_files" accept="file" :fileList="fileList1" @afterRead="afterRead1"
								@delete="deletePic1" name="6" multiple :maxCount="1" width="54" height="24">
								+
							</u-upload>
							<div class="file-name  u-flex" v-if="show_files" @click.stop="handleDownload(files)">
								<u-icon name="attach" color="#4871C0" size="24"></u-icon>
								<view class="filesnames">
									{{files?files.filename:""}}
								</view>
								<view class="new-tip" @click="show_files  = !show_files;fileList1=[]">
									<u-icon name="close" color="#ffffff" size="10"></u-icon>
								</view>
							</div>
						</view>
					</view>
					<view class="tishititle">仅支持上传word、excel、ppt、pdf、图片类型的文件</view>
				</view>
			</u-collapse-item>
		</u-collapse> -->
		<view class="submit" @click="submits">
			提交
		</view>
		<!--    openChangsuo-->
		<u-popup :show="showChangsuo" mode="bottom" @close="closeChangsuo" @open="openChangsuo" :closeable="true"
			:border-radius="10" close-icon-color="#010101" :mask-close-able="false" close-icon-size="42">
			<view class="content" style="height:50%">
				<!-- <u-icon name="checkbox-mark" color="#4871C0" size="28"></u-icon> -->
				<view class="title">请选择使用场所</view>
        <view class="changsuo_content">
          <view @click="selChangsuo(item)" :class="cangsuobeifei==item.place_name?'meet active':'meet '"
                v-for="(item, i) in placeall">
            {{item.place_name}} <text>
            <img src="@/static/assets/images/dui.png" v-if="cangsuobeifei==item.place_name" /></text>
          </view>
        </view>
				<view class="btn">
					<u-button class='cancelbtn' @click="closeChangsuo">取消</u-button>
					<u-button type="primary" text="确定" @click="chooseChangsuo" color='#4871C0'></u-button>
				</view>
			</view>
		</u-popup>
		<u-popup :show="showOrg" mode="bottom" @close="closeOrg" @open="openOrg" :closeable="true" :border-radius="10"
			close-icon-color="#010101" :mask-close-able="false" close-icon-size="42">
			<view class="content" style="height:40%">
				<view class="title">请选择牵头部门</view>
        <view class="changsuo_content">
          <view @click="selOrg(item)" :class="orgs==item.name?'meet active':'meet '"
            v-for="(item, i) in bumenlistall">
            {{item.name}} <text>
              <img src="@/static/assets/images/dui.png" v-if="orgs==item.name" /></text>
          </view>
        </view>
				<view class="btn">
					<u-button class='cancelbtn' @click="closeOrg">取消</u-button>
					<u-button type="primary" text="确定" @click="chooseOrg" color='#4871C0'></u-button>
				</view>
			</view>
		</u-popup>
		<u-calendar color="#4871C0" @close="closeTime" :closeOnClickOverlay="true" :show="showdate" :mode="mode"
			@confirm="confirm"></u-calendar>
		<u-popup :show="ispicker" mode="bottom" @close="closePicker" @open="chooseChangsuo" :closeable="true"
			:border-radius="10" close-icon-color="#010101" :mask-close-able="false" close-icon-size="42">
			<view class="content" style="height:60%">
				<view class="title">请选择使用时间</view>
				<view class="picker-time-desc">
					<view class="start-time">
						开始时间
					</view>
					<view class="end-time">
						结束时间
					</view>
				</view>
				<view>
					<picker-view :value="multiIndex" :indicator-style="indicatorStyle" @change="bindChange"
						class="picker-view">

						<picker-view-column>
							<view class="item" v-for="(v, i) in multiArray[0]">
								{{ v}}
							</view>
						</picker-view-column>

						<picker-view-column>
							<view class="item" v-for="(v, i) in multiArray[1]">
								{{ v}}
							</view>
						</picker-view-column>
					</picker-view>
				</view>
				<view class="btn">
					<u-button class='cancelbtn' @click="closePicker">取消</u-button>
					<u-button type="primary" text="确定" @click="sureTime" color='#4871C0'></u-button>
				</view>
			</view>
		</u-popup>
	</view>

</template>

<script>
	import {
		addPlace,
		addweekPlan,
		datezhuanhuan,
		getbumenList,
		getplanDetail,
	} from "@/api/feedbackApi";
	import {
		HTTP_REQUEST_URL,
	} from '@/config/app';
	export default {
		data() {
			return {
				show_files: false,
				token: uni.getStorageSync('token') || '',
				showdate: false,
				mode: 'single',
				date_string_all: '请选择日期',
				date_text: '',
				date_string: '',
				form: {},
				zhongxin: '',
				showOrg: false,
				showUser: false,
				showPlace: false,
				org: '请选择牵头部门',
				orgs: '',
				department_id: '',
				department_ids: '',
				remark: '',
				fuzeren: "",
				room: uni.getStorageSync('room_info'),
				date: "07-26 星期二",
				fileList: [],
				fileList1: [],
				bumenlistall: [],
				meet_id: '',
				id: '',
				images: [],
				files: null,
				fileName: null,
				showChangsuo: false,
				cangsuo: '请选择使用场所',
				cangsuobeifei: '',
				cangsuo_id: '',
				cangsuo_ids: '',
				placeall: [],
				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`,
				// multiArray:[['00:00', '00:30', '01:00', '01:30', '02:00', '02:30', '03:00', '03:30', '04:00', '04:30',
				// 	'05:00',
				// 	'05:30', '06:00', '06:30', '07:00', '07:30', '08:00', '08:30', '09:00', '09:30', '10:00',
				// 	'11:30', '12:00',
				// 	'12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00',
				// 	'18:30', '19:00', '19:30', '20:00', '20:30', '21:00', '21:30', '22:00', '22:30', '23:00',
				// 	'23:30'
				// ], ['00:00', '00:30', '01:00', '01:30', '02:00', '02:30', '03:00', '03:30', '04:00', '04:30',
				// 	'05:00',
				// 	'05:30', '06:00', '06:30', '07:00', '07:30', '08:00', '08:30', '09:00', '09:30', '10:00',
				// 	'11:30', '12:00',
				// 	'12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00',
				// 	'18:30', '19:00', '19:30', '20:00', '20:30', '21:00', '21:30', '22:00', '22:30', '23:00',
				// 	'23:30'

				// ]],
				multiArray:[[],[]],
				multiIndex: [0, 0],
				userTime: '',
				ispicker: false
			}
		},
		onLoad(options) {
			this.meet_id = options.meet_id;
			this.id = options.id;
			this.bumenlist();
			this.getplaceall();
			this.getplanDateils();
		},
		created() {
			for(let i = 0; i <= 23; i++){
				if(i < 10) {
					i = "0"+ i
				}
				for(let j = 0; j <= 50; j+=10){
					let k = j;
					if(k == 0){
						k = '0' + k;
					}
					this.multiArray[0].push(i+':'+k)
					this.multiArray[1].push(i+':'+k)
				}
			}
		},
		methods: {
			bindChange(e) {
				const val = e.detail.value;
				console.log("bindChange", val);
				this.multiIndex = val
			},
			sureTime(e) {
				this.userTime=this.multiArray[0][this.multiIndex[0]]+'-'+this.multiArray[1][this.multiIndex[1]];

				let time = this.userTime;
				time = time.split('-');
				let timeArr1 = time[0].split(':');
				let timeArr2 = time[1].split(':');
				timeArr1 = timeArr1[0] + timeArr1[1];
				timeArr2 = timeArr2[0] + timeArr2[1];

				this.ispicker = false;
				console.log(parseInt(timeArr1) , parseInt(timeArr2));
				if(parseInt(timeArr1) > parseInt(timeArr2)){

					uni.showToast({
						title: '开始时间不能大于结束时间',
						icon: 'none',
						duration: 2000
					});
					this.userTime = ''
				}

			},
			closePicker() {
				this.ispicker = false;
			},
			closeTime() {
				this.showdate = false
			},
			// 点击附件预览
			handleDownload(item) {
				console.log("=====item", item)
				let params = {
					url: item.fullurl, // 需要预览文件的地址(必填，可以使用相对路径)
					name: item.filename, // 需要预览文件的文件名(不填的话取url的最后部分)
					size: item.filesize, // 需要预览文件的字节大小(必填)
					type: item.mimetype
				}
				this.$store.dispatch('yulan', params)
			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
				this.images.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					console.log("result：", result)
					let item = this.fileList[fileListLen]
					this.fileList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					this.images.push(result)
					console.log("images:", this.images)
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: HTTP_REQUEST_URL + '/api/common/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							console.log("res:", res)
							if (JSON.parse(res.data).code == 1) {
								setTimeout(() => {
									resolve(JSON.parse(res.data).data.files)
								}, 500)
							} else {
								uni.showToast({
									title: JSON.parse(res.data).msg,
									icon: 'none',
									duration: 1000
								});
							}

						}
					});
				})
			},
			// 新增文件
			async afterRead1(event) {
				let _this = this;
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList1.length
				lists.map((item) => {
					this.fileList1.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise1(lists[i].url);
					console.log("=========lists", result)

					console.log("result===>", result)
					var data = result;

					if (!data) {
						this.fileList1.splice(event.index, 1)
						return false;
					}

					this.files = data;
					this.show_files = true;
					let item = this.fileList1[fileListLen]
					this.fileList1.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise1(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: HTTP_REQUEST_URL + '/api/common/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							if (JSON.parse(res.data).code == 1) {
								setTimeout(() => {
									resolve(JSON.parse(res.data).data.files)
								}, 500)
							} else {
								uni.showToast({
									title: JSON.parse(res.data).msg,
									icon: 'none',
									duration: 1000
								});
							}
						}
					});
				})
			},
			deletePic1() {
				this.fileList1.splice(event.index, 1)
				this.files = null;
				this.fileName = null;
			},
			getplanDateils() {
				let params = {
					token: this.token,
					id: this.$route.query.id || ''
				}
				getplanDetail(params).then(res => {
					this.isLoading = false;
					console.log(res)
					if (res.code == 1) {
						if (res.data) {
							//  有详情
							this.date_string_all = res.data.date_text + res.data.date_string;
							this.date_text = res.data.date_text;
							this.date_string = res.data.date_string;
							this.department_id = res.data.department_id
							this.department_ids = res.data.department_id;
							this.orgs = res.data.department_name;
							this.org = res.data.department_name;
							this.cangsuo = res.data.cangsuo || '';
							this.userTime=res.data.use_time,
							this.remark = res.data.remark;
							this.zhongxin = res.data.zhongxin;
							this.fuzeren = res.data.fuzeren;

							this.fileList = JSON.parse(res.data.images);
							this.images = JSON.parse(res.data.images);
							this.fileList1 = [JSON.parse(res.data.files)];
							this.files = JSON.parse(res.data.files);
							console.log("=====", JSON.parse(res.data.images), JSON.parse(res.data.files), this
								.fileList, this.fileList1)
							return
						} else {
							// 新增

						}
					}
				})
			},
			submits() {
				if (this.date_string_all == '请选择日期') {
					uni.showToast({
						title: '请选择日期',
						icon: 'none',
						duration: 1000
					});
					return;
				}
				if (!this.department_id) {
					uni.showToast({
						title: '请选择牵头部门',
						icon: 'none',
						duration: 1000
					});
					return;
				}
				if (!this.fuzeren) {
					uni.showToast({
						title: '请填写负责人',
						icon: 'none',
						duration: 1000
					});
					return;
				}
				if (this.cangsuo == '请选择使用场所') {
					uni.showToast({
						title: '请填写使用场所',
						icon: 'none',
						duration: 1000
					});
					return;
				}
				if (!this.zhongxin) {
					uni.showToast({
						title: '请填写中心计划',
						icon: 'none',
						duration: 1000
					});
					return;
				}
				let params = {
					token: this.token,
					meet_id: this.meet_id,
					id: this.id,
					date_text: this.date_text,
					date_string: this.date_string,
					department_id: this.department_id,
					fuzeren: this.fuzeren,
					zhongxin: this.zhongxin,
					cangsuo: this.cangsuo,
					use_time:this.userTime,
					remark: this.remark,
					images: JSON.stringify(this.images),
					files: this.files ? JSON.stringify(this.files) : {},
				}
				addweekPlan(params).then(res => {
					this.isLoading = false;
					console.log(res)
					if (res.code == 1) {
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: "none"
						});
						setTimeout(() => {
							uni.navigateBack()
						}, 2000)

					}else{
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: "none"
						});
					}
				})
			},
			openChangsuo() {
				this.showChangsuo = true;
			},
			closeChangsuo() {
				this.cangsuobeifei = this.cangsuo;
				this.cangsuo_ids = this.cangsuo_id;
				this.showChangsuo = false;
			},
			chooseChangsuo() {
				this.cangsuo = this.cangsuobeifei;
				this.cangsuo_id = this.cangsuo_ids
				this.showChangsuo = false;
				this.ispicker = true
			},
			selChangsuo(item) {
				this.cangsuobeifei = item.place_name;
				this.cangsuo_ids = item.id;
			},
			openOrg() {
				this.showOrg = true;
			},

			closeOrg() {
				this.orgs = this.org;
				this.department_ids = this.department_id;
				this.showOrg = false;
			},
			chooseOrg() {
				this.org = this.orgs;
				this.department_id = this.department_ids
				this.showOrg = false;
			},
			selOrg(item) {
				this.orgs = item.name;
				this.department_ids = item.id;
			},
			bumenlist() {
				let params = {
					token: this.token
				}
				getbumenList(params).then(res => {
					this.isLoading = false;
					this.bumenlistall = res.data
					console.log(res)
				})
			},
			getplaceall() {
				addPlace().then(res => {
					this.isLoading = false;
					this.placeall = res.data
					console.log(res)
				})
			},
			close() {
				this.showdate = false;
			},
			confirm(e) {
				console.log(e+123);
				this.showdate = false;
				let params = {
					token: this.token,
					date_text: e[0]
				}
				datezhuanhuan(params).then(res => {
					this.isLoading = false;
					this.date_string_all = e[0] + res.data.week;
					this.date_string = res.data.week;
					this.date_text = e[0];
					console.log(res)
				})
			},


		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/assets/css/index.css";
	@import "@/static/assets/css/mobiscroll.core-2.5.2.css";
	@import "@/static/assets/css/mobiscroll.animation-2.5.2.css";
	@import "@/static/assets/css/mobiscroll.android-ics-2.5.2.css";

	.upload-title {
		color: #999 !important;
	}

	.add-work-plan {
		width: 100%;
		background-color: #F9F9F9;

		.info {
			.date {
				display: flex;
				justify-content: space-between;
				padding: 0 30rpx;
				height: 108rpx;
				background-color: #fff;
				line-height: 108rpx;
				border-bottom: 1px solid #F9F9F9;
				color: #333;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
			}
		}

		.main-plan {
			background-color: #fff;
			margin-top: 20rpx;
			padding: 20rpx 30rpx;

			.text {
				height: 88rpx;
				line-height: 88rpx;
				font-size: 30rpx;
			}
			.must::before {
				content: "*";
				margin-right: 6rpx;
				color: red;
			}
		}

		.textarea {
			background-color: #F9F9F9;
			padding: 10rpx 15rpx;
		}

		.upload {
			.image {
				display: flex;
				justify-content: space-between;
				height: 108rpx;
				background-color: #fff;
				line-height: 108rpx;
				margin-bottom: 20rpx;

				.text {
					font-size: 30rpx
				}

				.uploadIcon {
					// background-color: #F9F9F9;
					// padding: 20rpx;
					display: flex;
					align-items: center;
				}
			}
		}

		.submit {
			overflow: hidden;
			height: 88rpx;
			line-height: 88rpx;
			background-color: #4871C0;
			text-align: center;
			color: #fff;
			margin: 40rpx 24rpx 20rpx;
			font-size: 32rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}
	}
	.info{
		/deep/.u-cell__body::before{
			content: "*";
			margin-right: 6rpx;
			color: red;
		}
	}


	/deep/.u-input {
		padding: 0 !important;
	}

	/deep/.u-button {
		border-width: 1px;
		border-style: solid;
		border-radius: 3px !important;
	}

	/deep/.u-upload__wrap__preview__other {
		height: 40px !important;
	}

	.file-name {
		padding: 10px;
		background: #F8F9FC;
		border-radius: 8px 8px 8px 8px;
		position: relative;
		display: flex;
		height: 30px;
		align-items: center;
		max-width: 270px;
		overflow: hidden;

		.filesnames {
			width: 100%;
			overflow: hidden;
			/*超出部分隐藏*/
			white-space: nowrap;
			/*不换行*/
			text-overflow: ellipsis;
		}
	}

	.new-tip {
		position: absolute;
		right: 0px;
		top: 0;
		width: 30px;
		text-align: center;
		height: 16px;
		line-height: 16px;
		border-radius: 0px 8px 0px 4px;
		font-size: 8px;
		color: #ffffff;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
	}

	.picker-time-desc{
		display: flex;
		justify-items: center;
		align-items: center;
		text-align: center;
		margin: 20rpx 0;
		color: #999;
		.start-time{
			flex: 1;
		}
		.end-time{
			flex: 1;
		}
	}
  .changsuo_content{
    height: 50vh;
    overflow-y: scroll;
  }

	/deep/ .picker-view {
		// width: 350px;
		height: 200px;
		margin-top: 10px;
	}

	/deep/ .uicon-close {
		z-index: 100;
	}

	/deep/ .item {
		height: 50px;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
</style>
